<template>
  <Modal :closable="false" v-model="visible" :title="title">
      <Form ref="form" v-if="visible" :model="form" label-position="top" :rules="rules">
        <Row :gutter="16">
          <Col span="12">
            <FormItem label="物料名称" required prop="materialName">
              <Input type="text" v-model="form.materialName" placeholder="请输入物料名称" class="inputBorder"></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="物料编码" required prop="materialNo">
              <Input type="text" v-model="form.materialNo" placeholder="请输入物料类型" class="inputBorder"></Input>
            </FormItem>
          </Col>
          
        </Row>

        <Row :gutter="16">
          <Col span="12">
            <FormItem label="物料类型" required prop="materialType">
              <Input type="text" v-model="form.materialType" placeholder="请输入物料类型" class="inputBorder"></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="物料属性" required prop="materialProperties">
              <Input type="text" v-model="form.materialProperties" placeholder="请输入物料属性" class="inputBorder"></Input>
            </FormItem>
          </Col>
         
        </Row>
        <Row :gutter="16">
          <Col span="12">
            <FormItem label="基本单位" required prop="basicUnit">
              <Input type="text" v-model="form.basicUnit" placeholder="请输入基本单位" class="inputBorder"></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="单位换算率" required prop="conversionUnit">
              <Input type="text" v-model="form.conversionUnit" placeholder="请输入单位换算率" class="inputBorder"></Input>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col span="12">
            <FormItem label="重量个数转换比" required prop="weightNumConvert">
              <Input type="number" v-model="form.weightNumConvert" placeholder="请输入物料数量" class="inputBorder"></Input>
            </FormItem>
          </Col>
          
        </Row>
      
      
      </Form>
      <div slot="footer" v-if="visible">
        <Button type="default" @click="closeModal">取消</Button>
        <Button type="primary" @click="handleSubmit('form')">确定</Button>
      </div>
    </Modal>
  </template>
  
  <script>
  export default {
    name: "CreateOrUpdateModal",
    props: {
      visible: Boolean,
      form: Object,
      title: String,
      handleAddSubmit: Function,
      dicData: Array,
      closeSubmit: Function,
    },
    data() {
      return {
        rules: {
        materialName: [
          { required: true, message: '请输入物料名称', trigger: 'blur' }
        ],
        materialNo: [
          { required: true, message: '请输入物料编码', trigger: 'blur' }
        ],
        materialType: [
          { required: true, message: '请输入物料类型', trigger: 'blur' }
        ],
        materialProperties: [
          { required: true, message: '请输入物料属性', trigger: 'blur' }
        ],
        basicUnit: [
          { required: true, message: '请输入基本单位', trigger: 'blur' }
        ],
        conversionUnit: [
          { required: true, message: '请输入单位换算率', trigger: 'blur' }
        ],
        weightNumConvert: [
          { required: true, message: '请输入重量个数转换比', trigger: 'blur' }
        ]
      },
      };
    },
  methods: {
    closeModal() {
      this.closeSubmit();
    },
    handleSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.handleAddSubmit(formName);
        }
      });
    },
  },
};
</script>

<style scoped>
.form-container {
  display: flex;
  flex-wrap: wrap; /* 允许子项换行 */
  justify-content: space-between; /* 子项之间的间隔 */
}

.form-container .form-item {
  flex: 1 0 48%; /* 每个表单项占据48%的宽度，剩余空间由space-between处理 */
  margin-bottom: 20px; /* 根据需要调整 */
}

/* 如果需要处理响应式布局，可以添加媒体查询 */
@media (max-width: 768px) {
  .form-container .form-item {
    flex: 1 0 100%; /* 在小屏幕上，每个表单项占据整行 */
  }

  .custom-form-item {
    width: 200px;
  }
}

/* 注意：由于Element UI的FormItem没有直接的.form-item类，你可能需要自定义或检查实际应用的类名 */
</style>
